<template>
  <div class="asset-management">
    <div class="asset">
      <div
        v-for="(item, index) in dataArr"
        :key="item.pcategoryName"
        :class="[activeIndex == index ? 'active asset-item' : 'asset-item']"
        @click="itemClick(index)"
      >
        {{ item.pcategoryName }}
      </div>
    </div>
    <div class="asset-content">
      <group v-if="activeIndex == '0'" :ownObj="ownObj" :curIdx="activeIndex" />
      <street
        v-else-if="activeIndex == '1'"
        :ownObj="ownObj"
        :curIdx="activeIndex"
      />
      <commission
        v-else-if="activeIndex == '2'"
        :ownObj="ownObj"
        :curIdx="activeIndex"
      />
    </div>
  </div>
</template>

<script>
import group from "../group.vue";
import street from "../street.vue";
import commission from "../commission.vue";
import { propertyPcategoryList } from "@/api/shops";
export default {
  components: {
    group,
    street,
    commission,
  },
  data() {
    return {
      dataArr: [],
      activeIndex: 0,
      ownObj: null,
    };
  },
  methods: {
    itemClick(index) {
      this.activeIndex = index + "";
      this.ownObj = this.dataArr[index];
      localStorage.removeItem("curIndex");
      sessionStorage.removeItem('currentPage')
      sessionStorage.removeItem('currentPage1')
      sessionStorage.removeItem('currentPage2')
    },
    getPropertyPcategoryList() {
      propertyPcategoryList().then((res) => {
        this.dataArr = res.data;
        this.ownObj = this.dataArr[this.activeIndex];
      });
    },
  },
  mounted() {
    if (localStorage.getItem("curIndex")) {
      this.activeIndex = localStorage.getItem("curIndex");
    }
    this.getPropertyPcategoryList();
  },
};
</script>

<style lang="scss" scoped>
.asset-management {
  .asset {
    display: flex;
    margin-top: 17px;
    margin-left: 80px;
    .asset-item {
      font-weight: 600;
      font-size: 16px;
      color: #505a69;
      text-align: center;
      height: 42px;
      // width: 184px;
      line-height: 42px;
      border-bottom: 42px solid #f6f6f6;
      border-right: 42px solid transparent;
      // box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); /* 斜面阴影效果 */
      border-top-left-radius: 5px;
      cursor: pointer;
      padding-left: 10px;
      margin-left: -20px;

      &:nth-child(1) {
        z-index: 1;
      }
      &:nth-child(1) {
        z-index: 2;
      }
      &:nth-child(1) {
        z-index: 3;
      }
      &.active {
        color: #0052d9;
        border-bottom: 42px solid #fff;
        border-right: 42px solid transparent;
        z-index: 4;
      }
    }
  }
  .asset-content {
    width: 98%;
    height: calc(100vh - 140px);
    margin: 0 auto;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.25);
    overflow: auto;
  }
}
</style>